<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<view class="empty-view grace-flex-center  grace-flex-vcenter grace-animate fadeIn" v-if="list.length === 0 && isSearch">
				<image class="empty-img" mode="widthFix" src="../../static/image/nothing.png"></image>
			</view>
			<block v-else v-for="(item, index) in list" :key="index">
				<index-list :item="item"></index-list>
			</block>
			<graceLoading :loadingType="loadingType"></graceLoading>
		</view>
	</gracePage>
</template>

<script>
import IndexList from '../../components/index-list/index-list';
var graceJS = require('@/Grace.JS/grace.js');
export default {
	data() {
		return {
			// 加载状态
			isSearch:false,
			loadingType: 3,
			page: 1,
			query: '',
			list:[],
			newData: [
				{
					userAvatar: '../../static/demo/userpic/8.jpg',
					username: '涛哥哥',
					isFollow: false,
					title: '我是新数据啦啦啦啦',
					type: 'img', //video
					pic: '../../static/demo/datapic/8.jpg',
					playNum: '20w',
					duration: '2:47',
					info: {
						status: 0, //0 没有操作 1 赞 2 踩
						likeNum: 11,
						unLikeNum: 11
					},
					commentNum: 10,
					shareNum: 10
				},
				{
					userAvatar: '../../static/demo/userpic/8.jpg',
					username: '涛哥哥',
					isFollow: false,
					title: '我是新数据啦啦啦啦',
					type: 'img', //video
					pic: '../../static/demo/datapic/8.jpg',
					playNum: '20w',
					duration: '2:47',
					info: {
						status: 0, //0 没有操作 1 赞 2 踩
						likeNum: 11,
						unLikeNum: 11
					},
					commentNum: 10,
					shareNum: 10
				}
			]
		};
	},
	onReachBottom() {
		// 判断加载状态避免多次滚动时有加载尚未完成
		if (this.loadingType == 2 || this.loadingType == 4) {
			return false;
		}
		this.loadMoreFunc();
	},
	onPullDownRefresh() {
		setTimeout(()=>{
			uni.stopPullDownRefresh()
		}, 2000);
	},
	onNavigationBarButtonTap(e) {
		if (e.index == 0) {
			uni.navigateBack({});
		}
	},
	onNavigationBarSearchInputConfirmed(e) {
		if(e.text){
			this.getData(e.text)
		}
	}, 
	methods: {
		getData(){
			graceJS.showLoading("加载中...");
			let arr = [
				{
					userAvatar: '../../static/demo/userpic/10.jpg',
					username: '涛哥哥11',
					isFollow: false,
					title: '我是标题啦啦啦啦',
					type: 'img', //video
					pic: '../../static/demo/datapic/12.jpg',
					playNum: '20w',
					duration: '2:47',
					info: {
						status: 0, //0 没有操作 1 赞 2 踩
						likeNum: 11,
						unLikeNum: 11
					},
					commentNum: 10,
					shareNum: 10
				},
				{
					userAvatar: '../../static/demo/userpic/10.jpg',
					username: '涛哥哥11',
					isFollow: true,
					title: '我是标题啦啦啦啦',
					type: 'video', //video
					pic: '../../static/demo/datapic/12.jpg',
					playNum: '20w',
					duration: '2:47',
					info: {
						status: 1, //0 没有操作 1 赞 2 踩
						likeNum: 11,
						unLikeNum: 11
					},
					commentNum: 10,
					shareNum: 10
				},
				{
					userAvatar: '../../static/demo/userpic/10.jpg',
					username: '涛哥哥11',
					isFollow: true,
					title: '我是标题啦啦啦啦',
					type: 'video', //video
					pic: '../../static/demo/datapic/12.jpg',
					playNum: '20w',
					duration: '2:47',
					info: {
						status: 1, //0 没有操作 1 赞 2 踩
						likeNum: 11,
						unLikeNum: 11
					},
					commentNum: 10,
					shareNum: 10
				}
			]
			setTimeout(()=>{
				this.list = arr
				uni.hideLoading();
				this.isSearch = true;
			},2000)
		},
		loadMoreFunc() {
			this.loadingType = 1;
			//追加数据(延迟1秒 模拟网络请求)
			setTimeout(() => {
				if (this.page > 3) {
					this.loadingType = 2;
					return;
				}
		
				this.list = this.list.concat(this.newData);
		
				// 页码增加
				this.page++;
				setTimeout(() => {
					this.loadingType = 3;
				}, 300);
			}, 1000);
		},
	},
	components: {
		IndexList
	}
};
</script>

<style lang="stylus">
.empty-view
	background #FFFFFF
	position absolute
	top 0
	bottom 0
	left 0
	right 0
	.empty-img
		width 40%
</style>
